<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
    <Tabs :datas="tabs" v-model="selected" style="height: 35px"></Tabs>
    <div v-if="selected=='1'" style="padding-top: 20px;height: 100%;overflow-y: auto;">
      <ServiceForm :service="service" @change="onFormChange" @close="onClose"/>
    </div>
    <div v-if="selected=='2'" style="height: 100%">
      <div style="height: 30px">
        <Checkbox v-model="log_auto_refresh">自动刷新</Checkbox>
        <Checkbox v-model="log_lock_scroll">锁定滚动</Checkbox>
      </div>
      <textarea readonly v-model="logs" style="width: 100%;height: calc(100% - 30px);resize: none" ref="log"/>
    </div>
    <div v-if="selected=='3'" style="height: 100%;overflow-y: auto">
      <div class="service-chart">
        <Chart :options="cpu"></Chart>
      </div>
      <div class="service-chart">
        <Chart :options="memory"></Chart>
      </div>
      <div class="service-chart">
        <Chart :options="disk"></Chart>
      </div>
    </div>
  </div>
</template>
<script>
import {ajax,format} from 'framework'
import ServiceForm from "./serviceForm.vue";

export default {
  components: {ServiceForm},
  props: {
    service: {
      type: Object
    }
  },
  data() {
    return {
      selected: "1",
      tabs: {
        1: '配置信息',
        2: '日志',
        3: '运行监控'
      },
      logs: '',
      log_auto_refresh: true,
      log_lock_scroll: false,
      pos: 0,
      cpu:{},
      memory:{},
      disk:{}
    }
  },
  mounted() {
    this.itv = setInterval(this.onRefresh, 1000)
  },
  watch:{
    'service.name'(){
      this.pos=0
    }
  },
  beforeDestroy() {
    clearInterval(this.itv)
  },
  methods: {
    onFormChange() {
      this.$emit("change")
    },
    onClose() {
      this.$emit("close")
    },
    onRefresh() {
      if (!this.service.name) {
        return
      }
      if (this.selected == '2' && this.log_auto_refresh&&this.service.type!='url') {
        ajax.get('server/get_log?pos=' + this.pos, {server:this.service.server,service:this.service.name}).then(r => {
          let data = r.data
          if (data.last > 0) {
            this.pos = data.last
            this.logs += data.content
            if (!this.log_lock_scroll) {
              this.$nextTick(() => {
                let el = this.$refs.log
                el.scrollTop = el.scrollHeight
              })
            }
          }

        })
      }
      if(this.selected == '3'&&this.service.type!='url'){
        ajax.post('server/sevice_status',this.service).then(r=>{
          this.cpu=this.createV("CPU",r.data.process)
          this.disk=this.createV("Disk",r.data.file)
          this.memory=this.createV("Memory",r.data.process)
        })
      }
    },
    createV(name,data){
      let series={
        name: name,
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: function(a,b,c){
            return format(a,"##.0")+"%"
          }
        },
        data: [
          {
            value: data.ratio,
            name: name
          }
        ]
      }
      let formatter='{b} : {c}%'
      if(name=="Disk"){
        series.max=format(data.total.replace('GB',''),"##")
        series.data[0].value=data.used.replace('GB','')
        series.detail.formatter=format(data.ratio,"##")+"%"
        formatter="Used:"+data.used+"<br/>Ratio:"+format(data.ratio,"##.0")+"%";
      }else if(name=="Memory"){
        series.data[0].value=data.MEM
        // series.max=format(data.total.replace('GB',''),"##")
        // series.data[0].value=data.used.replace('GB','')
        // series.detail.formatter=format(data.ratio,"##")+"%"
        // formatter="Used:"+data.used+"<br/>Ratio:"+format(data.ratio,"##.0")+"%";
      }else if(name=="CPU"){
        series.data[0].value=data.CPU
      }
      return {
        tooltip: {
          formatter: formatter
        },
        series: [
          series
        ]
      }
    }
  }
}
</script>
<style>
.service-chart{
  width: 400px;
  height: 300px;
  display: inline-block;
}
</style>
